<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<meta name="keywords" content="LightYear,LightYearAdmin,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="Light Year Admin V5是一个基于Bootstrap v5.1.3的后台管理系统的HTML模板。">
<title>首页 - 光年(Light Year Admin V4)后台管理系统模板</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<link rel="stylesheet" type="text/css" href="__STATIC__/admin/css/materialdesignicons.min.css">
<link rel="stylesheet" type="text/css" href="__STATIC__/admin/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="__STATIC__/admin/css/style.min.css">
<!--日期选择器css-->
<link rel="stylesheet" type="text/css" href="__STATIC__/admin/js/bootstrap-datepicker/bootstrap-datepicker3.min.css">
<!--时间日期选择器css-->
<link rel="stylesheet" type="text/css" href="__STATIC__/admin/js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css">
<link href="__STATIC__/common/datatables/jquery.datatables.css" rel="stylesheet">
</head>
  
<body>
<div class="container-fluid">
  <div class="row">
      <div class="col-lg-12">
        <div class="card">
          <div class="card-body">
            <form class="search-form" method="get" action="{:url(request()->action())}" role="form">
              {include file="html/search" /}
            </form>
            <div class="toolbar-btn-action">
              <a class="btn btn-success m-r-5 search_btn" href="javascript:void(0)"><i class="mdi mdi-magnify"></i> 搜索</a>
              <a class="btn btn-info export_btn" href="javascript:void(0)"><i class="mdi mdi-arrow-collapse-down"></i> 导出</a>
            </div>
          </div>
      </div>
    </div>
  </div>



  <div class="row">



    <div class="col-md-12">
      <div class="card">
        <div class="card-header">
          <div class="card-title">统计柱状图</div>
        </div>
        <div class="card-body">
          <canvas class="js-chartjs-bars"></canvas>
        </div>
      </div>
    </div>

  </div>

  <div class="row" >

    <div class="col-lg-12">
      <div class="card">
        <header class="card-header">
          <div class="card-title">所有客户业务量转化率排名</div>
        </header>
        <div class="card-body">
          <div class="table-responsive">
            <?php if (empty($list)): ?>
            <table class="table table-bordered" >
                <tr><td colspan="100" class="text-center">暂无数据</td></tr>
            </table>
            <?php else: ?>
            <table class="table table-bordered" id="table1">
              <thead>
                <tr>
                    <th>评估人员</th>
                    <th>初评数量</th>
                    <th>报告数量</th>
                    <th>项目评分</th>
                    <th>评估收费</th>
                    <th>创收评分</th>
                    <th>综合总分</th>
                </tr>
              </thead>
              <tbody>
                    <?php foreach ($list as $k => $vo): ?>
                        <tr>
                            <td>{:$vo['name']}</td>
                            <td>{:$vo['cpsl']}</td>
                            <td>{:$vo['bgsl']}</td>
                            <td>{:$vo['xmpf']}</td>
                            <td>{:$vo['pg_charge']}</td>
                            <td>{:$vo['cspf']}</td>
                            <td>{:$vo['total']}</td>
                        </tr>
                    <?php endforeach ?>
              </tbody>
              <tfoot>
                    <tr> 
                        <td>{:$total['name']}</td>
                        <td>{:$total['cpsl']}</td>
                        <td>{:$total['bgsl']}</td>
                        <td>{:$total['xmpf']}</td>
                        <td>{:$total['pg_charge']}</td>
                        <td>{:$total['cspf']}</td>
                        <td>{:$total['total']}</td>
                    </tr>
              </tfoot>
            </table>
            <?php endif ?>
          </div>
        </div>
      </div>
    </div>

  </div>

</div>

<!--申请开票-->
<div class="modal fade bs-example-modal-lg in" tabindex="-1" id="modal-order">
  <div class="modal-dialog modal-xl modal-dialog-centered" style="min-width:90%;">
    <div class="modal-content">
      <div class="modal-header">
        <h6 class="modal-title">询价明细</h6>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <iframe src="" style="width:100%;min-height: 480px;"></iframe>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript" src="__STATIC__/admin/js/jquery.min.js"></script>
<script type="text/javascript" src="__STATIC__/admin/js/popper.min.js"></script>
<script type="text/javascript" src="__STATIC__/admin/js/bootstrap.min.js"></script>
<script type="text/javascript" src="__STATIC__/admin/js/chart.min.js"></script>
<script src="__STATIC__/common/datatables/jquery.datatables.min.js"></script><!-- 表格插件 -->
<!--日期选择器js-->
<script type="text/javascript" src="__STATIC__/admin/js/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
<script type="text/javascript" src="__STATIC__/admin/js/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script>
<!--时间日期选择器js-->
<script type="text/javascript" src="__STATIC__/admin/js/momentjs/moment.min.js"></script>
<script type="text/javascript" src="__STATIC__/admin/js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="__STATIC__/admin/js/momentjs/locale/zh-cn.min.js"></script>
<!--引入chart插件js-->
<script type="text/javascript" src="__STATIC__/admin/js/main.min.js"></script>
<!--自定义扩展-->
<script type="text/javascript" src="__STATIC__/common/cch.js"></script>
<script type="text/javascript" src="__STATIC__/common/cch-util.js"></script>
<script type="text/javascript">
    jQuery('#table1').dataTable({
         "bPaginate" : false,
         "bLengthChange":false,
         "bFilter" : false,
         "bSort" : true,
         "bInfo": false,
         "aaSorting": [[1, "desc"]], 
         "aoColumnDefs": [{ //给每个单独的列设置不同的填充，或者使用aoColumns也行
                  "aTargets": [0],
                  "bSortable": false
              }
        ],

    });


</script>
<script type="text/javascript">
var query = $.parseJSON('{:json_encode($params)}')

function orderModal(btn) {
  var params = http_build_query(query);
  var data_search = $(btn).attr('data-search');
  if ( data_search == null ) { data_search = ''; };
  if (params == '') {
    params = data_search;
  }else{
    params += '&'+data_search;
  }

  var url = '{:url("order/index",[],'')}?'+params;
  $("#modal-order").find('iframe').attr('src',url);
  console.log(url);
}

$(document).ready(function(e) {
  var data = $.parseJSON('{:json_encode($chart_data)}');
  console.log(data)
  var datasets = [];
  for(var i in data.datasets){
    datasets.push({
      label: data.datasets[i]['name'],
      data: data.datasets[i]['dataset'],
      borderColor: data.datasets[i]['color'],
      backgroundColor: data.datasets[i]['color'],
    });
  }

  // 水平条形图
  new Chart($('.js-chartjs-bars'), {
    type: 'bar',
    data: {
      labels: data.labels,
      datasets: datasets
    },
    options: {
      indexAxis: 'y',
      elements: {
        bar: {
          borderWidth: 2,
        }
      },
      responsive: true,
      plugins: {
        legend: {
          position: 'right',
        },
        title: {
          display: true,
          text: '水平条形图'
        }
      }
    },
  })

});
</script>
</body>
</html>